<template>
  <el-dialog title="供应商结算" :visible.sync="visible" width="85%">
    <el-tabs v-model="tabIndex" type="card" @tab-click="getList">
      <!-- <el-tab-pane label="全部" name="9"></el-tab-pane> -->
      <el-tab-pane label="结算统计" name="0"></el-tab-pane>
      <el-tab-pane label="原料结算明细" name="1"></el-tab-pane>
      <el-tab-pane label="运费结算明细" name="2"></el-tab-pane>
    </el-tabs>
    <el-form
      v-if="tabIndex == '0'"
      :model="formModel"
      label-width="130px"
      :rules="rules"
      ref="form"
      size="mini"
    >
      <!-- 员工 -->
      <template>
        <!-- 供应商 -->
        <p>供应商信息</p>
        <el-card>
          <el-col :span="12">
            <el-form-item label="供应商ID" prop="contractId">
              {{ "字段数据" }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商名称" prop="contractId">
              {{ "字段数据" }}
            </el-form-item>
          </el-col>
        </el-card>
        <p>结算信息</p>
        <el-card>
          <el-col :span="12">
            <el-form-item label="结算起止日期" prop="contractId">
              {{ "字段数据" }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原料结算金额(元)" prop="contractId">
              {{ "字段数据" }}
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <p>原料结算统计</p>
            <!--  v-loading="loading" -->
            <el-table :data="originList" size="mini">
              <el-table-column
                label="原料名称"
                :show-overflow-tooltip="true"
                align="center"
                prop="orderId1"
              />
              <el-table-column
                label="扣杂后数量(吨)"
                :show-overflow-tooltip="true"
                align="center"
                prop="orderId2"
              />
              <el-table-column
                label="单价"
                :show-overflow-tooltip="true"
                align="center"
                prop="orderId3"
              />
              <el-table-column
                label="总价"
                :show-overflow-tooltip="true"
                align="center"
                prop="orderId4"
              />
            </el-table>
          </el-col>
          <el-col :span="24">
            <p>运费结算统计</p>
          </el-col>
          <el-col :span="6">
            <el-form-item label="累计运距" prop="contractId">
              {{ "字段数据" }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="核减" prop="num">
              <el-input
                placeholder="请输入"
                style="width: 150px"
                v-model="formModel.num"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="核增" prop="num">
              <el-input
                placeholder="请输入"
                style="width: 150px"
                v-model="formModel.num"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审批单ID" prop="num">
              <el-input
                placeholder="请输入"
                style="width: 260px"
                v-model="formModel.num"
              >
                <template slot="append">钉钉运费审批单ID</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运费结算金额" prop="contractId">
              {{ "字段数据" }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <p>账单结算金额</p>
          </el-col>
          <el-col :span="12">
            <el-form-item label="核减" prop="num">
              <el-input
                placeholder="请输入"
                style="width: 150px"
                v-model="formModel.num"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="核增" prop="num">
              <el-input
                placeholder="请输入"
                style="width: 150px"
                v-model="formModel.num"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审批单ID" prop="num">
              <el-input
                placeholder="请输入"
                style="width: 260px"
                v-model="formModel.num"
              >
                <template slot="append">OA运费审批单ID</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运费结算金额" prop="contractId">
              {{ "字段数据" }}
            </el-form-item>
          </el-col>
          <!-- 原料结算明细 -->
          <el-col :span="7" v-if="formModel.deliveryType == '0'">
            <el-form-item label="" label-width="0" prop="supplierId">
              <el-input
                placeholder="请选择"
                v-model="formModel.supplierId"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- 运费结算明细 -->
          <el-col :span="7" v-if="formModel.deliveryType == '1'">
            <el-form-item label="" label-width="0" prop="carriersId">
              <el-input
                placeholder="请选择"
                v-model="formModel.carriersId"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-card>

        <el-card style="margin-bottom: 10px" v-if="formModel.id">
          <el-descriptions title="">
            <el-descriptions-item label="订单状态" span="24"
              >kooriookami</el-descriptions-item
            >
            <el-descriptions-item label="订单ID" span="24"
              >18100000000</el-descriptions-item
            >
            <el-descriptions-item label="创建时间" span="24"
              >苏州市</el-descriptions-item
            >
            <el-descriptions-item label="最后编辑时间" span="24">
              学校
            </el-descriptions-item>
            <el-descriptions-item label="最后编辑人" span="24"
              >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
            >
          </el-descriptions>
        </el-card>
      </template>
    </el-form>

    <!--  v-loading="loading" -->
    <el-table v-if="tabIndex == '1'" :data="originList">
      <el-table-column
        label="运输单ID"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId1"
      />
      <el-table-column
        label="进场过磅时间"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId2"
      />
      <el-table-column
        label="出场过磅时间"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId3"
      />
      <el-table-column
        label="车牌照"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId4"
      />

      <el-table-column
        label="原料名称"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId4"
      />
      <el-table-column
        label="扣杂后数量"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId4"
      />
      <el-table-column
        label="单价"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId4"
      />
      <el-table-column
        label="总价"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId4"
      />
      <el-table-column
        label="订单ID"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId4"
      />
      <el-table-column
        label="合同ID"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId4"
      />
    </el-table>

    <!--  v-loading="loading" -->
    <el-table v-if="tabIndex == '2'" :data="originList">
      <el-table-column
        label="运输单ID"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId1"
      />
      <el-table-column
        label="进场过磅时间"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId2"
      />
      <el-table-column
        label="出场过磅时间"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId3"
      />
      <el-table-column
        label="车牌照"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId4"
      />

      <el-table-column
        label="运距"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId4"
      />
      <el-table-column
        label="原料名称"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId4"
      />
      <el-table-column
        label="运费单价/公里"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId4"
      />
      <el-table-column
        label="运费"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId4"
      />
      <el-table-column
        label="发货地点"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId4"
      />
      <el-table-column
        label="收货地点"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId4"
      />
      <el-table-column
        label="订单ID"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId4"
      />
      <el-table-column
        label="合同ID"
        :show-overflow-tooltip="true"
        align="center"
        prop="orderId4"
      />
    </el-table>
  </el-dialog>
</template>
  
  <script>
import SelectNameDialog from "@/components/SelectDialog/SelectNameDialog";
//
import {
  addOrders,
  updateOrders,
  getOrders,
  allInventory,
} from "@/api/service/orderCenter/purchase";
import { validatePhoneNumber } from "@/utils";

export default {
  components: {
    SelectNameDialog,
  },
  data() {
    return {
      originList: [
        {
          orderId1: "sdsa",
          orderId2: "231vdxs",
          orderId3: "fdsaad22csfd",
          orderId4: "w231ds",
        },
      ],
      visible: false,
      tabIndex: "0",
      selectFirmVisible: false,
      rules: {
        nickName: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "change",
          },
        ],
        deliveryType: [
          {
            required: true,
            message: "请选择配送方式",
            trigger: "change",
          },
        ],
        num: [
          {
            required: true,
            message: "请输入订货数量",
            trigger: "change",
          },
        ],
        orgId: [
          {
            required: true,
            message: "请选择机构",
            trigger: "change",
          },
        ],
        deptId: [
          {
            required: true,
            message: "请选择部门",
            trigger: "change",
          },
        ],
        phonenumber: validatePhoneNumber(),
        rawMaterialId: [
          {
            required: true,
            message: "请选择原料",
            trigger: "change",
          },
        ],
        unloadInventoryId: [
          {
            required: true,
            message: "请选择卸货仓库",
            trigger: "change",
          },
        ],
        capacity: [
          {
            required: true,
            message: "请输入仓库容量",
            trigger: "change",
          },
        ],
        province: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        city: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        county: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        location: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "change",
          },
        ],
        location: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "change",
          },
        ],
        supplierId: [
          {
            required: true,
            message: "请选择供应商",
            trigger: "change",
          },
        ],
        carriersId: [
          {
            required: true,
            message: "请选择承运商",
            trigger: "change",
          },
        ],
      },
      formModel: {
        rawMaterialId: "",
        deliveryType: "",
        num: "",
        capacity: "",
        province: "",
        city: "",
        county: "",
        location: "",
      },
      total: 0,
      allInve: [],
      initObj: {},
    };
  },
  methods: {
    getList(val) {
      console.log(val);
    },
    // 初始化函数--->父级调用
    handelInit(val) {
      this.initObj = val;
      this.visible = true;
    },
    getAllInventory() {
      allInventory().then((res) => {
        this.allInve = res.data.map((item) => ({
          ...item,
          label: item.name,
          value: item.id,
        }));
      });
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.handleValidateSuccess();
        } else {
          return false;
        }
      });
    },
    handleValidateSuccess() {
      if (!this.userId) {
        addOrders({
          ...this.formModel,
        }).then((res) => {
          console.log(res);
          this.handleOkToLink();
        });
      } else {
        updateOrders({
          ...this.formModel,
        }).then((res) => {
          console.log(res);
          this.handleOkToLink();
        });
      }
    },
    handleOkToLink() {
      this.$modal.msgSuccess("操作成功");
      // this.getUserInfo(this.userId);
      this.$router.push({
        path: "/orderCenter/purchase/index",
      });
    },
    handleBack() {
      this.$router.push({
        path: "/orderCenter/purchase/index",
      });
    },
    selectFirm(row) {
      this.form.contractId = row.id;
      this.form.subjectFirmName = row.name;
      this.$refs.form.validateField("contractId");
    },
    getUserInfo(userId) {
      if (userId) {
        getOrders(userId).then((response) => {
          console.log("11123", response);
          this.formModel = {
            ...this.formModel,
            ...response.data,
            ...response.sysUserInfo,
          };
        });
      }
    },
  },
  created() {
    this.getAllInventory();
    this.userId = this.$route.query.id;
    if (this.userId) {
      this.getUserInfo(this.userId);
    }
  },
  computed: {
    title() {
      return !this.$route?.query?.id ? "新增采购订单" : "修改采购订单";
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.tree-border {
  width: 150px;
}
.place_container {
  display: flex;
  .el-form-item {
    margin-right: 10px;
    margin-bottom: 5px;
  }
}
.el-form-item {
  margin-bottom: 9px;
}
</style>
  